<template>
<view :class="['page',{'iphoneX':isIphoneX}]"> 
	<view v-if="isLogin" class="body">	
		<template v-if="loadingStatus.default">
			<loading :loadingState="loadingStatus"></loading>
		</template> 
		
		<template v-else> 
			<view class="title">
				<template v-if="detail.is_month==1"> 
					{{detail.add_time.substr(0,7)+' 数据'}}
				</template>	
				<template v-else>
					{{'第'+detail.week_num+'周 '+detail.week_start+'至'+detail.week_end+'数据'}}
				</template>	
				
			</view>
			<view class="detail-wrap m-b1">
				<view class="detail-item">
					<view class="label">一级发生面积(亩)</view>
					<view class="detail-input">
						<view class="content">
							<view class="val">{{detail.fs_area_one}}</view> 
							<view class="link">亩</view>
						</view>			 
					</view>			
				</view> 
				<view class="detail-item">
					<view class="label">二级发生面积(亩)</view>
					<view class="detail-input">
						<view class="content">
							<view class="val">{{detail.fs_area_two}}</view> 
							<view class="link">亩</view>
						</view>			 
					</view>			
				</view> 
				<view class="detail-item">
					<view class="label">三级发生面积(亩)</view>
					<view class="detail-input">
						<view class="content">
							<view class="val">{{detail.fs_area_thr}}</view> 
							<view class="link">亩</view>
						</view>			 
					</view>			
				</view> 
				<view class="detail-item">
					<view class="label">四级发生面积(亩)</view>
					<view class="detail-input">
						<view class="content">
							<view class="val">{{detail.fs_area_for}}</view> 
							<view class="link">亩</view>
						</view>			 
					</view>			
				</view> 
				<view class="detail-item">
					<view class="label">五级发生面积(亩)</view>
					<view class="detail-input">
						<view class="content">
							<view class="val">{{detail.fs_area_fiv}}</view> 
							<view class="link">亩</view>
						</view>			 
					</view>			
				</view> 
				<view class="detail-item">
					<view class="label">防控面积(亩)</view>
					<view class="detail-input">
						<view class="content">
							<view class="val">{{detail.fk_area}}</view> 
							<view class="link">亩</view>
						</view>			 
					</view>			
				</view> 
				<view class="detail-item">
					<view class="label">投入药剂(公斤)</view>
					<view class="detail-input">
						<view class="content">
							<view class="val">{{detail.yj_total}}</view> 
							<view class="link">公斤</view>
						</view>			 
					</view>			
				</view> 
				<view class="detail-item">
					<view class="label">监测防控人次(人次)</view>
					<view class="detail-input">
						<view class="content">
							<view class="val">{{detail.jcfk_total}}</view> 
							<view class="link">人次</view>
						</view>			 
					</view>			
				</view> 
				<view class="detail-item">
					<view class="label a-t">备注</view>
					<view class="detail-textarea">
						<view class="content">
							{{detail.remark}}
						</view>					 
					</view>			
				</view>  
			</view>
			<view class="tips">
				<text>上级单位可对数据进行修订</text>			
				<template v-if="detail.status==0" ><text class="status">审核中</text></template>
				<template v-if="detail.status==1||detail.status==2"><text class="status">已审核</text></template> 
				</text>
			</view>
			
		 
			<view v-if="detail.xd_list.length>0" class="log-wrap">
				<view class="hd-title">修订记录</view> 
				<view class="item" v-for="(item,index) in detail.xd_list" :key="index">
					<view class="time">{{item.add_time}} 数据被修订</view>
					<div class="list">
						<view class="text" v-if="item.one_isup==1">
							<template>
								<text class="label">一级发生面积（亩）：</text>{{item.old_v1}}<text class="f-red"> -> </text>{{item.fs_area_one}}
							</template> 					
						</view>
						<view class="text" v-if="item.two_isup==1"> 
							<template>
								<text class="label">二级发生面积（亩）：</text>{{item.old_v2}}<text class="f-red"> -> </text>{{item.fs_area_two}}
							</template>  
						</view>
						<view class="text" v-if="item.thr_isup==1">
							<template>
								<text class="label">三级发生面积（亩）：</text>{{item.old_v3}}<text class="f-red"> -> </text>{{item.fs_area_thr}}
							</template>  
						</view>
						<view class="text" v-if="item.for_isup==1">
							<template>
								<text class="label">四级发生面积（亩）：</text>{{item.old_v4}}<text class="f-red"> -> </text>{{item.fs_area_for}}
							</template>  
						</view>
						<view class="text" v-if="item.fiv_isup==1">
							<template>
								<text class="label">五级发生面积（亩）：</text>{{item.old_v5}}<text class="f-red"> -> </text>{{item.fs_area_fiv}}
							</template>  
						</view>
						<view class="text" v-if="item.fk_area_isup==1">
							<template>
								<text class="label">防控面积（亩）：</text>{{item.old_v6}}<text class="f-red"> -> </text>{{item.fk_area}}
							</template>  
						</view>
						<view class="text" v-if="item.yj_total_isup==1">
							<template>
								<text class="label">投入药剂（公斤）：</text>{{item.old_v7}}<text class="f-red"> -> </text>{{item.yj_total}}
							</template>  
						</view>
						<view class="text" v-if="item.jcfk_total_isup==1">
							<template>
								<text class="label">监测防控人次（人次）：</text>{{item.old_v8}}<text class="f-red"> -> </text>{{item.jcfk_total}}
							</template>  
						</view>  
					</div>
				</view>
			</view>
		</template>
		
	</view> 
</view>
</template>

<script>  
import loading from '@/components/loading-more.vue'
export default{
	name:'demo',
	data(){
		return{
			isIphoneX:getApp().globalData.isIphoneX,
			id:'',
			isLogin:false,
			detail:{},
			loadingStatus:{
				default:true
			}
		}
	}, 
	async onLoad(params) { 
		this.isLogin = await this.$loginState('check'); 
		
		this.id=params.id;
		this.getDetail();
	},
	methods:{
		 
		getDetail:async function(){
			let _this=this;
			let res=await this.$api.ysb_api.getDetail({
				id:this.id 
			}) 
			if(res.data.ret==0){
				this.loadingStatus.default=false;
				this.detail=res.data.data;
			} 
		},  
		  
		
	},
	computed:{
		
	},
	components:{
		loading
	}
}
</script>

<style lang="less">
	.iphoneX{
		padding-bottom: 50rpx;
	}
	.tips{
		display: flex;
		justify-content: space-between;
		padding:20rpx ;
		font-size: 28rpx; 
		color:#f00;
		.status{
			padding:3rpx 5rpx;
			background: #f00;
			border-radius: 5rpx;
			color:#fff;
		}
	}
	.title{
		margin:20rpx 0;
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
	}
	.detail-wrap{
		.detail-item{
			.label{
				width: 38%;
			}
			.link{
				color:#000;
			}
		}
	}
	.log-wrap{
		padding:0 20rpx;
		background: #fff;
		.item{ 
			border-bottom:1rpx solid #ddd;
			padding:20rpx 0;
			&:last-child{
				border-bottom:0 none;
			}
			.time{
				margin-bottom: 10rpx;
				flex-shrink: 0;
				font-size: 30rpx;
				font-weight: bold;
			}
			.list{ 
				.text{ 
					margin-bottom: 8rpx;
					font-size: 28rpx;					
					.label{
						display: inline-block;
						width: 45%;
					}
				}
			}
		}
	}
	// .detail-wrap{
	// 	display: flex;
	// 	border-bottom: 0 none;
	// 	.left{
	// 		width: 35%;
	// 		border-right: 1rpx solid #ddd; 
	// 	}
	// 	.right{
	// 		width: 65%;
	// 		overflow: hidden;
	// 	}
	// 	.item{
	// 		position: relative;
	// 		height: 120rpx;
	// 		line-height: 120rpx;
	// 		border-bottom: 1rpx solid #ddd;
	// 		font-size: 28rpx;
	// 		text-align: center;
	// 		.l-txt,.r-txt{
	// 			position: absolute;
	// 			line-height: 0;
	// 			font-size: 28rpx;
	// 			font-weight: bold;
	// 		}
	// 		.l-txt{				
	// 			left:10rpx;
	// 			bottom:30rpx;				
	// 		}
	// 		.r-txt{
	// 			right:10rpx;
	// 			top:30rpx;	
	// 		}
	// 		.line{
	// 			position: absolute;
	// 			width: 100%;
	// 			height: 2rpx;
	// 			top:60rpx;
	// 			border-bottom: 1rpx solid #ddd;
	// 			transform: rotate(15deg);
	// 		}
	// 	}
	// }
	.scroll-X{
		white-space: nowrap;
		.scroll-view-item{
			display: inline-block;
			width: 300rpx;
			border-right: 1rpx solid #ddd; 
		}
	}
	.detail-wrap-scroll{ 
		background: #fff;
		white-space: nowrap;
		.item-wrap{
			display: flex;
			height: 120rpx;			
			.item{
				text-align: center;
				flex-shrink: 0;
				line-height: 120rpx;
				width: 300rpx;
				font-size: 30rpx;
				border-right: 1rpx solid #ddd;
				border-bottom: 1rpx solid #ddd;
			}
		}
		
	}
	.hd-title{ 
		padding:20rpx;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}
</style>
